<template>
  <div class="home">
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline" style="height: 100%">
          <a-menu-item key="welocome" @click="toWelcome">
            <MailOutlined />
            <span>欢迎</span>
            <!-- <router-link to="/about"><span>欢迎</span></router-link> -->
          </a-menu-item>
          <a-sub-menu v-for="item in level1" :key="item.id">
            <template v-slot:title>
              <span><user-outlined />{{ item.name }}</span>
            </template>
            <a-menu-item v-for="child in item.children" :key="child.id" @click.stop="showContent(child.id)">
              <mail-outlined/><span>{{ child.name }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
<!--  页面内容 -->
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
<!--    欢迎页面 -->
        <template v-if="!tablevisiable">
          <TheWelcome/>
        </template>
<!--    表格 -->
        <a-list v-if="tablevisiable" item-layout="vertical" size="large" :grid="{
          gutter: 20, column:
            3
        }" :data-source="ebooks">

          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <template #actions>
                <span v-for="{ icon, text } in actions" :key="icon">
                  <component :is="icon" style="margin-right: 8px" />
                  {{ text }}
                </span>
              </template>

              <a-list-item-meta :description="item.description">
                <template #title>
                  <router-link :to="'/doc?ebookId='+item.id">{{ item.name }}</router-link>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>

            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
import { StarOutlined, LikeOutlined, MessageOutlined, MailOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import { Tool } from '@/utils/tool'
import { onMounted, ref } from 'vue';
import TheWelcome from '@/components/TheWelcome.vue';


// 定义响应式数据
const ebooks = ref();
const level1 = ref();
const tablevisiable = ref();

onMounted(() => {
  handleQueryEbook();
  handleQueryCategory();
})

const handleQueryEbook = () => {
  axios.get("/ebook/list", {
    params: {
      page: 1,
      size: 20
    }
  }).then(resp => {
    console.log(resp);
    ebooks.value = resp.data.content.list;
  })
}

//数据查询
const handleQueryCategory = () => {
  axios.get("/category/all").then((resp) => {
    const data = resp.data;
    if (data.success) {
      level1.value = [];
      level1.value = Tool.array2Tree(data.content, 0);
      console.log("数形结构，", level1)
    } else {
      console.log(data.message)
    }
  });
}

//根据分类展示页面内容
function showContent(sort:any) {
  tablevisiable.value = true;
  axios.get("/ebook/list", {
    params: {
      page: 1,
      size: 20,
      categoryId2: sort
    }
  }).then(resp => {
    console.log(resp);
    ebooks.value = resp.data.content.list;
  })
}

//将欢迎页面展示出来
function toWelcome() {
  tablevisiable.value = false;
}

const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: '156' },
  { icon: LikeOutlined, text: '156' },
  { icon: MessageOutlined, text: '2' },
];
</script>


<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>
